<!-- 诊断项 -->
<template>
  <div>
    <ContainerSlot>
      <template slot="searchModule">
        <SearchForm :label-width="labelWidth" :form-config="formConfig" :form-data="formData" :slot-list="slotList">
          <template slot="searchBtn">
            <el-button type="primary" @click.prevent="search()"> 查询 </el-button>
          </template>
        </SearchForm>
      </template>

      <template slot="operationModule">
        <el-button type="primary" @click="add">添加</el-button>
        <el-button type="danger"  @click="delSelectData"> 删除 </el-button>
      </template>

      <template slot="contentModule">
        <Table :prop-list="propList" :list-data="tableData" @handleSelectionChange="handleSelectionChange">
          <template slot="mainFeaturesFlag" slot-scope="{row}">
            {{row.diagnosisItemName? row.mainFeaturesFlag ? "是" : "否" :row.mainFeaturesFlag=''}}
          </template>
          <template slot="operation" slot-scope="{row}">
             <el-button class="opt" type="primary" v-show="row.diagnosisItemId" plain @click="edit(row)">
                <i class="el-icon-edit-outline"></i>编辑
              </el-button>
              <el-button class="opt" type="danger" v-show="row.diagnosisItemId" plain @click="del(row)">
                <i class="el-icon-delete"></i>删除
              </el-button>
          </template>
        </Table>
      </template>
      <!-- 分页器 -->
      <template slot="footerModule">
        <el-pagination :current-page="currentPage" background :page-size="pageSize" 
        :page-sizes="[10, 20, 30]" layout=" prev, pager, next, jumper" :total="total" 
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </template>
    </ContainerSlot>

    <!-- 对话框 -->
    <el-dialog :close-on-click-modal='false' :title="`诊断项${title}`" :visible.sync="dialogFormVisible" top="30vh" @close="cancle">
      <!-- 表单收集 -->
      <el-form ref="ruleForm" :inline="true" :model="toform" :rules="rules">

        <el-form-item label="诊断项名称：" :label-width="formLabelWidth" prop="diagnosisItemName">
          <el-input v-model="toform.diagnosisItemName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="关联品种：" :label-width="formLabelWidth" prop="fishVarietyId">
          <el-select v-model="toform.fishVarietyId" placeholder="请选择" clearable>
            <el-option v-for="item of FishVarietyList"
              :key="item.fishVarietyId"
              :label="item.varietyName"
              :value="item.fishVarietyId" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="主要判断特征" class="w50p" prop="mainFeaturesFlag">
          <el-select v-model="toform.mainFeaturesFlag" clearable>
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import FeaturesTypeManageApi from "@/api/disease-bank-manage/features-type-manage/index";   // 诊断项
import FishVarietyApi from "@/api/fishVariety/index"; // 鱼类品种管理

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table },
  data() {
    return {
      title: '添加',
      // 分页
      total: 1,        // 总条数
      currentPage: 1,  // 当前页
      pageSize: 10,    // 每页条数
      mainFeaturesFlag:'是',
      propList: [
        { prop: 'diagnosisItemName', label: '诊断项名称', minWidth: '120' },
        { prop: 'varietyName', label: '关联品种',minWidth: '120' },
        { prop: 'mainFeaturesFlag', label: '是否是主要判断特征' ,slotName: 'mainFeaturesFlag'},
        { label: '操作', minWidth: '180', slotName: 'operation' }
      ],
      tableData: [],       // 表格数据
      idList: [],          // 表格所选行的id数组，用于批量删除；
      labelWidth: '100px', // 表单项宽度
      // 查询栏 - 表单配置
      formConfig: [
        {
          label: '诊断项名称',
          prop: 'diagnosisItemName',
          type: 'input',
          width: '150px'
        }
      ],
      // 查询栏 - 表单数据
      formData: {
        diagnosisItemName: ''
      },
      // 插槽
      slotList: [
        {
          slotName: 'searchBtn'
        }
      ],
      // 对话框显示/隐藏
      dialogFormVisible: false,
      formLabelWidth: '120px',
      // 对话框-保存/修改表单收集
      toform: {
        diagnosisItemName:'',
        fishVarietyId:1,
        mainFeaturesFlag:true,
      },
      // 鱼类品种
      FishVarietyList:[],
      // type: [],
      // 表单验证
      rules: {
        diagnosisItemName: [
          { required: true,message: "请输入",trigger: ["blur"] },
        ],
        fishVarietyId: [
          { required: true,message: "请选择",trigger: ["blur","change"] },
        ],
        mainFeaturesFlag: [
          { required: true, message: "请选择", trigger: ["blur","change"] },
        ],
      },
    }
  },
  created(){
    this.getDiagnosisList()
  },
  mounted() {
    this.qureyFishVariety()
  },
  methods: {
    // 获取鱼类品种
      qureyFishVariety() {
      FishVarietyApi.queryByCondition().then((res) => {
        this.FishVarietyList = res.data;
      });
    },
     // 查询
    search() {
      this.currentPage=1
      this.getDiagnosisList( )
    },
    // 获取诊断项列表
    async getDiagnosisList(){
      let params = {
        page: this.currentPage, // 当前页
        size: this.pageSize,    // 每页条数
        // sortList:[{
        //   property:'diagnosisItemId',
        //   direction:'desc',
        // }],
        condition:this.formData
      };
      let res=await FeaturesTypeManageApi.queryPageByCondition(params)
      console.log('查询',res);
      if (res.code==200) {
        this.tableData=res.data.content  
        this.total=res.data.totalElements
      }else{
        this.$message.error(res.code)
      }
      console.log('res***',res);
    },
    // 当前页
    handleCurrentChange(e) {
      this.currentPage = e
      this.getDiagnosisList()
      // this.search()
      console.log(`当前第${e}页`);
    },
    // 
    handleSizeChange(e) {
      this.pageSize = e
    },
    // 添加
    add() {
      console.log( this.tableData);
      this.title = '添加'
      this.dialogFormVisible = true
      this.toform={}
      // this.$refs.ruleForm.resetFields()
    },
    // 修改
    edit(row) {
      console.log(row);
      this.title = '修改'
      this.dialogFormVisible = true
      this.toform={...row}
    },
    // 对话框 - 添加/修改表单
    save(){
       this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (this.title === '添加') {
              let res=await FeaturesTypeManageApi.add(this.toform)
              if (res.code==200) {
                this.$message.success('添加成功！')
                this.getDiagnosisList()
                this.dialogFormVisible = false // 关闭对话框
              }else{
                this.$message.error(res.msg)
              }
              console.log(res);
            }
            if (this.title === '修改') {
               let res=await FeaturesTypeManageApi.edit(this.toform)
              if (res.code==200) {
                this.$message.success('修改成功！')
                this.getDiagnosisList()
                this.dialogFormVisible = false // 关闭对话框
              }else{
                this.$message.error(res.msg)
              }
            }
          } else {
            return false;
          }
        });
    },
    // 删除单条数据
    del(row) {
      console.log('当前删除的',row);
       this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async() => {  
          let res=await FeaturesTypeManageApi.delById(row.diagnosisItemId)
          console.log('---',res);
          if (res.code==200) {
            if (this.total%this.pageSize==1&&this.currentPage!=1) {
              this.currentPage=this.currentPage-1
            }
            this.getDiagnosisList()
            this.$message({ type: 'success', message: '删除成功!' });
          }else{
            this.$message.error(res.code)
          }
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });          
        });
    },
    // 当表格的选择项发生变化时触发
    handleSelectionChange (selectData) {  
      this.idList = []  
      selectData.forEach(item => {   
        item.diagnosisItemId && this.idList.push(item.diagnosisItemId) 
        console.log('当前的item',item);
      });
      console.log('this.idList',this.idList)
    },
    // 批量删除
    delSelectData () {
      if (!this.idList.length) {
        return
      }
      this.$confirm('您确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        FeaturesTypeManageApi.delListById(this.idList).then(res => {
          if (res.code == 200) {
            this.getDiagnosisList()
            this.$message({type: 'success',message: '删除成功!'});
          } else {
            this.$message.error(res.code)
          }
        })
      }).catch(() => {
        this.$message({type: 'info',message: '已取消删除'});
      });
    },
    // 取消按钮
    cancle() {
      this.dialogFormVisible = false
      this.$nextTick(()=>{
        this.$refs.ruleForm.resetFields()
      })
    },
   
  }
}
</script>

<style lang="scss" scoped>
// dialog框header背景色
::v-deep .el-dialog__header {
  background: #0480fb;
}
// 设置dialog框叉号颜色
::v-deep .el-dialog__close {
  color: #fff;
}
// dialog框标题颜色
::v-deep .el-dialog__title {
  color: #fff;
}
</style>
